<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>会员购</title>
    <link rel="stylesheet" th:href="@{/css/shopXxDiv.css}">
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}" />
    <link rel="stylesheet" th:href="@{/css/BVideo.css}" />
</head>
<body>

    <div class="container-fluid bmTopDiv">
        <div class="col-md-1 bmTopLogoFont">
            <h3>BhSyVideo</h3>
        </div>
        <div class="col-md-2 bmTopXxDiv">
            <ul class="">
                <li class="bmToplif"><a style="text-decoration: none;color: white" th:href="@{/bhsy/theMain}"> 首页</a></li>
            </ul>
        </div>
    </div>

  <div class="shopXxDiv">
      <div class="shopTypeDiv">手办</div>
      <div class="shopTypeDiv">周边</div>
      <div class="shopTypeDiv">漫画</div>
      <div class="shopTypeDiv">挂件</div>
      <div class="shopTypeDiv">工具</div>
      <br/>
      <hr style="border: 1px dashed rgba(226,226,226,0.68);width: 100%;margin-top: 3%">
  </div>
    <div class="shopAllDiv">
        <div class="shopMainDiv" th:each="s:${allShop}">
            <img class="shopImg" th:src="${s.SImg}">
            <div class="shopMsg">
                <input style="display: none" type="text" class="shopId" th:value="${s.sid}">
                <div class="shopName" th:text="${s.SName}"></div>
                <div class="shopMoney" th:text="${'￥'+s.SMoney}">￥9</div>
                <input type="text" style="display: none" class="DisTime" th:value="${s.lastTime}">
                <input type="text" style="display: none" class="DisETime" th:value="${s.endTime}">
                <p class="lastTime" style="display: none" th:text="${s.lastTime}">倒计时</p>
                <input class="qGou"  type="button" value="抢购">
            </div>
        </div>
    </div>
    <div class="msgTg" style="display: none">

    </div>
</body>
<script th:src="@{/js/jquery-360.min.js}"></script>
<script>
    var nIndex = [];
    $(function () {
        jsLastTime();
        var qGou = document.getElementsByClassName("qGou");
    })
    function jsLastTime(){
        var DisTime = document.getElementsByClassName("DisTime");
        var shopId = document.getElementsByClassName("shopId");
        var shopMoney = document.getElementsByClassName("shopMoney");
        var DisETime = document.getElementsByClassName("DisETime");
        var lastTime = document.getElementsByClassName("lastTime");
        var qGou = document.getElementsByClassName("qGou");
        var setTime = [];
        var NowDate;
        for (let i = 0; i < lastTime.length; i++) {

            setTime[i] = setInterval(function () {
                NowDate = new Date();
                if (DisTime[i].value>0){
                    DisTime[i].value=DisTime[i].value-1000;
                    lastTime[i].style.display="block";
                    lastTime[i].innerText = formatDuring(DisTime[i].value);
                    qGou[i].setAttribute("disabled",true);
                }else if (DisTime[i].value<=0&&NowDate.getTime()<=DisETime[i].value){
                    if (nIndex[i]!=1){
                        createShopRedis(shopId[i].value,i);
                        qGou[i].removeAttribute("disabled");
                    }
                    DisTime[i].innerText="";
                    lastTime[i].innerText="";
                    qGou[i].style.backgroundColor="#f387ab";
                    qGou[i].style.color = "#ffffff";

                }else if (NowDate.getTime()>=DisETime[i].value){
                    DisTime[i].innerText="";
                    lastTime[i].innerText="";
                    qGou[i].setAttribute("disabled",true);
                    qGou[i].setAttribute("value","抢购结束");
                    qGou[i].style.backgroundColor="rgb(185,185,185)";
                    qGou[i].style.color = "#ffffff";
                    clearInterval(setTime[i]);
                }
            },1000);
        }

    }

    function createShopRedis(sid,index){
        var DisTime = document.getElementsByClassName("DisTime");
        var shopId = document.getElementsByClassName("shopId");
        var shopMoney = document.getElementsByClassName("shopMoney");
        var DisETime = document.getElementsByClassName("DisETime");
        var lastTime = document.getElementsByClassName("lastTime");
        var qGou = document.getElementsByClassName("qGou");
        $.ajax({
            url:"/cShopRed/"+sid,
            type:"post",
            success:function (data) {
                console.log(data)
                nIndex[index] = 1;
                var shopMoney = document.getElementsByClassName("shopMoney");
                var shopId = document.getElementsByClassName("shopId");
                qGou[index].onclick = function () {
                    $.ajax({
                        url: "/qiangG",
                        type: "post",
                        data:{
                            "sid":shopId[index].value,
                            "bMoney":shopMoney[index].innerText.replace("￥","")
                        },
                        success:function (data) {
                            console(data.msg);
                            $.ajax({
                                url:"/countForS",
                                type:"post",
                                success:function (data){
                                    console.log(data)
                                }
                            })
                        }
                    })
                }
            }
        })
    }

    function QiangGo(){
        alert(1);
    }

    function formatDuring(mss) {
        var days = parseInt(mss / (1000 * 60 * 60 * 24));
        var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = parseInt((mss % (1000 * 60)) / 1000);
        return days + " 天 " + hours + " 小时 " + minutes + " 分钟 " + seconds + " 秒 ";
    }
</script>
</html>